<template>
  <div class="bsn-wrapper">
      <img class="bsn-img" src="\src\assets\icon\地址.svg" />
      <span class="bsn-address">桂林理工大学(雁...</span>

      <van-dropdown-menu ref="menuRef" class="my_dropdown_menu">
          <van-dropdown-item title="全部商家" ref="itemRef" @click="iconActive(0)">
              <div class="item-button">
                <van-button>全部商家</van-button>
                <van-button>粉面粥饼</van-button>
                <van-button>正餐小吃</van-button>
                <van-button>炸串烧烤</van-button>
                <van-button>麻辣烫冒菜</van-button>
                <van-button>奶茶咖啡</van-button>
                <van-button>超市百货</van-button>
              </div>
          </van-dropdown-item>

          <van-dropdown-item title="综合排序" ref="itemRef" @click="iconActive(1)">
            <div class="item-button">
                <van-button>综合排序</van-button>
                <van-button>最新下单</van-button>
                <van-button>距离最近</van-button>
                <van-button>点的最多</van-button>
              </div>
          </van-dropdown-item>
      </van-dropdown-menu>
  </div>
</template>





<script setup>
import { ref} from 'vue';



const menuRef = ref(null);
const itemRef = ref(null);
const icon_active = ref(0);

function iconActive(value) {
  icon_active.value = value;
}



</script>






<style lang="scss">
.bsn-wrapper {
  .bsn-img {
      width: 15px;
      margin-top: 25px;
      margin-left: 20px;
      margin-right: 3px;
      margin-bottom: -2px;
  }

  .bsn-address {
      margin-top: 10px;
      font-size: 15px;
  }
}




.my_dropdown_menu {
  width: 200px;
  float: right;
  padding: 0px;
  margin-top: -19px;
  /* font-size: 20px; */
  margin-right: 20px;
}

/* 使用样式穿透修改下拉菜单的样式，不能有scoped */
.my_dropdown_menu>.van-dropdown-menu__bar {
  margin-left: 20px;
  background-color: #FAE45B;
  --van-dropdown-menu-height: 20px;

  border: 0px;
  --van-dropdown-menu-title-font-size: 15px;
  --van-dropdown-menu-shadow: 0px;
  --van-dropdown-menu-title-text-color: rgb(0, 0, 0);
  --van-dropdown-menu-title-active-text-color: rgb(0, 0, 0);
}

.item-button > .van-button{
  width:110px;
  background-color: #F7F7F7;
  border-radius: 20px;
  border:0px;
  margin-top:10px;
  margin-bottom: 4px;
  margin-left:8px;
  margin-right:5px;
}

</style>